<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
</head>
<body>

<div id="app-1">
    <div id="example-1">
       <button v-on:click="counter+=1">增加1</button>
        <p>这个按钮被点击了 {{counter}} 次</p>


        <button v-on:click="countClick(123)" data-id="0932mafdsfi">增加1</button>
        <p>这个按钮被点击了 {{counter}} 次</p>

        <button v-on:click="countClick2(123,$event)">增加1</button>
        <p>这个按钮被点击了 {{counter}} 次</p>

        <button v-on:click.once="countClick">onceClick</button>

        <div>key使用方式 </div>

        <input v-on:keyup.13="countClick">
        <input v-on:keyup.enter="countClick">
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app-1',
        data:{
            counter:0
        },
        methods:{
            countClick:function (event) {
                console.log(event);
                console.log(event.target);
                console.log(event.target.dataset.id);
                this.counter += 1;
            },
            countClick2:function (id,event) {
                console.log(id);
                console.log(event);
            }
        }
    });
</script>
</body>
</html>